<template>
  <div class="topic-form">
    <el-form ref="ruleForm" :rules="rules" :model="model" label-width="160px">
      <el-row :gutter="10">
        <el-col :span="22">
          <el-form-item label="代码段名称" prop="name">
            <el-input v-model="model.name" name="name">
            </el-input>
          </el-form-item>
        </el-col>


        <el-col :span="22">
          <el-form-item label="请求参数" prop="name">
            <sc-form-table v-model="model.extData.filters" drag-sort :addTemplate="addTemplate">
              <el-table-column width="210" align="center" label="显示名称">
                <template #default="scope">
                  <el-input v-model="scope.row.fieldName"></el-input>
                </template>
              </el-table-column>
              <el-table-column width="210" align="center" label="字段名称">
                <template #default="scope">
                  <el-input v-model="scope.row.javaName"></el-input>
                </template>
              </el-table-column>
              <el-table-column width="160" align="center" label="占位符">
                <template #default="scope">
                  <el-input v-model="scope.row.placeholder"></el-input>
                </template>
              </el-table-column>
              <el-table-column width="130" align="center" label="字段类型">
                <template #default="scope">
                  <el-select
                      v-model="scope.row.fieldType"
                      placeholder="选择类型"
                  >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column width="130" align="center" label="控件类型">
                <template #default="scope">
                  <el-select
                      v-model="scope.row.inputType"
                      placeholder="控件类型"
                  >
                    <el-option
                        v-for="item in inputOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column width="160" align="center" label="是否必传">
                <template #default="scope">
                  <el-radio-group v-model="scope.row.required">
                    <el-radio-button label="必传" :value="1"/>
                    <el-radio-button label="非必传" :value="2"/>
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column width="150" align="center" label="显示区域">
                <template #default="scope">
                  <el-select v-model="scope.row.area" clearable placeholder="显示区域">
                    <el-option label="接口调用" :value="1"/>
                    <el-option label="主搜索" :value="2"/>
                    <el-option label="扩展搜索" :value="3"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align="center" label="接口地址" width="200">
                <template #default="scope">
                  <el-input v-model="scope.row.queryUrl"></el-input>
                </template>
              </el-table-column>
            </sc-form-table>


            <div>
              <el-button @click="addSort" style="margin-top: 15px;">添加参数字段</el-button>
              <el-button @click="copySort" style="margin-top: 15px;">复制参数字段</el-button>
              <el-button @click="pasteSort" style="margin-top: 15px;">粘贴参数字段</el-button>
            </div>

          </el-form-item>



        </el-col>

        <el-col :span="22">
          <el-form-item>
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import {ref} from "vue";
import scFormTable from "@/components/scFormTable/index.vue";
import {ElMessage} from "element-plus";

// 定义emit
const emit = defineEmits(['submit', 'cancel']);

// 表单数据
const model = defineModel({
  default: () => ({
    extData:{
      filters: []
    }
  })
});
const options = ref([

  {
    label: "字符数组",
    value: 10
  },
  {
    label: "字符串",
    value: 1
  },
  {
    label: "整型",
    value: 2
  },
  {
    label: "长整型",
    value: 3
  },
  {
    label: "map对象",
    value: 13
  },
  {
    label: "json对象",
    value: 200
  },
  {
    label: "json数组",
    value: 201
  },
  {
    label: "浮点数",
    value: 4
  },
  {
    label: "对象",
    value: 9
  },
  {
    label: "整形数组",
    value: 11
  },
  {
    label: "小数数组",
    value: 12
  },
  {
    label: "BigDecimal",
    value: 5
  },
  {
    label: "日期",
    value: 6
  }, {
    label: "字符输入",
    value: 101
  },
  {
    label: "布尔",
    value: 7
  },
  {
    label: "枚举",
    value: 8
  }

])

const inputOptions = ref([
  {
    label: "多选框",
    value: 6
  },
  {
    label: "日期区间",
    value: 8
  },
  {
    label: "时间区间",
    value: 9
  },
  {
    label: "下拉框",
    value: 2
  },
  {
    label: "输入框",
    value: 1
  },

  {
    label: "日期",
    value: 3
  },
  {
    label: "时间",
    value: 4
  },
  {
    label: "日期时间",
    value: 5
  },
  {
    label: "开关",
    value: 7
  }

])
// 验证规则
const rules = ref({});

const ruleForm = ref(null);


const addTemplate = ref({
  fieldName: null,
  javaName: null,
  fieldType: null
})
const addSort = () => {
  model.value.extData.filters.push({
    fieldName: null,
    javaName: null,
    fieldType: null
  })
}


const copySort = () => {
  if (model.value.extData.filters.length > 0) {
    //json话过滤参数 复制到剪贴板上
    let json = JSON.stringify(model.value.extData.filters);
    navigator.clipboard.writeText(json).then(function () {
      ElMessage({
        message: '复制成功',
        type: 'success',
      })
    }, function (err) {
      console.error('Async: Could not copy text: ', err);
    });
  }
}

const pasteSort = () => {
  navigator.clipboard.readText().then(function (clipText) {
    let newFilters = JSON.parse(clipText);
    // 现有的 javaName 集合
    let existJavaNames = new Set(model.value.extData.filters.map(item => item.javaName));
    // 过滤掉重复的
    let uniqueNewFilters = newFilters.filter(item => item.javaName && !existJavaNames.has(item.javaName));
    // 追加到 filters
    model.value.extData.filters = [...model.value.extData.filters, ...uniqueNewFilters];
    ElMessage({
      message: '粘贴成功',
      type: 'success',
    });
  });
}


// 处理提交
const handleSubmit = async () => {
  if (!ruleForm.value) return;

  try {
    await ruleForm.value.validate();
    emit('submit', model.value);
  } catch (error) {
    console.log('表单验证失败', error);
  }
};

// 处理取消
const handleCancel = () => {
  emit('cancel');
};

// 暴露表单引用给父组件
defineExpose({
  ruleForm,
  validate: () => ruleForm.value?.validate(),
  resetFields: () => ruleForm.value?.resetFields()
});
</script>

<style scoped>
.topic-form {
  width: 100%;
}
</style>
